<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        hr,
        p,
        blockquote,
        dl,
        dt,
        dd,
        ul,
        ol,
        li,
        pre,
        form,
        fieldset,
        legend,
        button,
        input,
        textarea,
        th,
        td {
            margin: 0;
            padding: 0
        }

        html {
            color: #000;
            overflow-y: scoll;
            overflow: -moz-scrollbars-vertical
        }

        .border {
            position: absolute;
            border: 1px dashed blue;
            width: 0px;
            height: 0px;
            left: 0px;
            top: 0px;
            overflow: hidden;
        }

        .rect {
            position: absolute;
            border: 1px solid #CCCCCC;
            overflow: hidden;
            background: #EFEFEF
        }

        .RectWrapper {
            display: flex;
            flex-wrap: wrap;
            width: 200px;
        }

        .RectWrapper .Rect {
            width: 30px;
            height: 30px;
            margin-left: 5px;
            margin-top: 5px;
            border: 1px solid black;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div class="RectWrapper">
        <div class="Rect"></div>
        <div class="Rect"></div>
        <div class="Rect"></div>
        <div class="Rect"></div>
        <div class="Rect"></div>
        <div class="Rect"></div>
        <div class="Rect"></div>
        <div class="Rect"></div>
        <div class="Rect"></div>
        <div class="Rect"></div>
        <div class="Rect"></div>
        <div class="Rect"></div>
        <div class="Rect"></div>
        <div class="Rect"></div>
        <div class="Rect"></div>
    </div>
    </div>
    <script>
        //用来判断结点是否在选区中
        function isSelected(node, border) {
            let nodeTop = node.offsetTop;
            let nodeLeft = node.offsetLeft;
            let nodeWidth = node.offsetLeft + node.offsetWidth;
            let nodeHeight = node.offsetTop + node.offsetHeight;
            if ((nodeLeft <= border.rightBorder && nodeWidth >= border.leftBorder) && (nodeTop <= border.bottomBorder &&
                    nodeHeight >= border.topBorder)) {
                return true;
            } else {
                return false;
            }
        }
        let startX = 0,
            startY = 0;
        let flag = false;
        let rectLeft = 0,
            rectTop = 0,
            rectHeight = 0,
            rectWidth = 0;
        let area = ""
        let rectArr = document.getElementsByClassName("Rect");
        document.onmousedown = function (e) {
            flag = true;
            try {
                let evt = window.event || e;
                let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                let scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
                startX = evt.clientX + scrollLeft;
                startY = evt.clientY + scrollTop;
                //生成选框
                area = document.createElement("div");
                area.className = "border";
                area.style.marginLeft = startX + "px";
                area.style.marginTop = startY + "px";
                document.body.appendChild(area);
            } catch (e) {
                console.log(e);
            }
        }
        document.onmousemove = function (e) {
            if (flag) {
                try {
                    let evt = window.event || e;
                    //获取坐标来生成选框位置和大小
                    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                    let scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
                    rectLeft = (startX - evt.clientX - scrollLeft > 0 ? evt.clientX + scrollLeft : startX);
                    rectTop = (startY - evt.clientY - scrollTop > 0 ? evt.clientY + scrollTop : startY);
                    rectHeight = Math.abs(startY - evt.clientY - scrollTop);
                    rectWidth = Math.abs(startX - evt.clientX - scrollLeft);
                    let node = document.getElementsByClassName("border")[0];
                    // 改变选框大小
                    node.style.marginLeft = rectLeft + "px";
                    node.style.marginTop = rectTop + "px";
                    node.style.width = rectWidth + "px";
                    node.style.height = rectHeight + "px";
                    // 选框对象
                    let border = {
                        leftBorder: rectLeft,
                        rightBorder: rectLeft + rectWidth,
                        topBorder: rectTop,
                        bottomBorder: rectTop + rectHeight
                    }
                    for (let i = 0; i < rectArr.length; i++) {
                        //判断矩形是否在方框中
                        let isSelect = isSelected(rectArr[i], border);
                        rectArr[i].style.backgroundColor = isSelect ? "red" : ""
                    }
                } catch (e) {
                    console.log(e);
                }
            }
        }
        document.onmouseup = function () {
            try {
                let node = document.getElementsByClassName("border")[0];
                //删除选框
                document.body.removeChild(node);
            } catch (e) {
                console.log(e);
            }
            flag = false;
        }
    </script>
</body>

</html>